<template>
  <div class="content" ref="content">
    <div
      style="margin-bottom: 20px"
      class="flex alignCenter"
      v-loading="loading"
      ref="statisticRef"
    >
      <div class="icon" @click="setDate(1)">
        <img src="https://cos.qcshejiao.com/qc/xcxui/ig/60603.png" alt="" />
      </div>
      <div class="grids gridColumns6">
        <div class="flex justifyCenter statistic">
          <el-statistic
            :title="`${time_format}开票总金额`"
            :value="info.invoicingTotal"
            :value-style="valueStyle"
          />
        </div>
        <div class="flex justifyCenter statistic">
          <el-statistic
            :title="`${time_format}订单总金额`"
            :value="info.orderTotal"
            :value-style="valueStyle"
          />
        </div>
        <div class="flex justifyCenter statistic">
          <el-statistic
            :title="`${time_format}开班数量`"
            :value="info.classTotal"
            :value-style="valueStyle"
          ></el-statistic>
        </div>
        <div class="flex justifyCenter statistic">
          <el-statistic
            :title="`${time_format}培训人数`"
            :value="info.trainCount"
            :value-style="valueStyle"
          ></el-statistic>
        </div>
        <div class="flex justifyCenter statistic">
          <el-statistic
            :title="`${time_format}培训人数（团体）`"
            :value="info.groupCount"
            :value-style="valueStyle"
          ></el-statistic>
        </div>
        <div class="flex justifyCenter statistic">
          <el-statistic
            :title="`${time_format}获证情况`"
            :value="info.hasCertTotal"
            :value-style="valueStyle"
          >
            <template #suffix>/{{ info.certificationTotal }}</template>
          </el-statistic>
        </div>
      </div>
      <div class="icon" @click="setDate(2)">
        <img src="https://cos.qcshejiao.com/qc/xcxui/ig/44174.png" alt="" />
      </div>
    </div>

    <div class="grids gridColumns2">
      <div class="grid">
        <moxueyuanReport :gridHeight="gridHeight"></moxueyuanReport>
      </div>
      <div class="grid">
        <courseReport :gridHeight="gridHeight"></courseReport>
      </div>
      <div class="grid lessonScheduleMonth">
        <lessonScheduleMonth
          v-model="dates"
          :gridHeight="gridHeight"
          isReport="1"
        ></lessonScheduleMonth>
      </div>
      <div class="grid">
        <classReport :gridHeight="gridHeight"></classReport>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import classReport from "@/views/components/classReport.vue";
import moxueyuanReport from "@/views/components/moxueyuanReport.vue";
import courseReport from "@/views/components/courseReport.vue";
import lessonScheduleMonth from "@/views/courseManage/components/lessonScheduleMonth.vue";
const { proxy } = getCurrentInstance();

let dates = ref([]);
let gridHeight = ref(0);
let info = ref({});
let time = ref(proxy.$utils.dateTimeFormateFn(new Date()));
let loading = ref(false);

let valueStyle = computed(() => {
  return {
    textAlign: "center",
    fontSize: "28px",
  };
});
let time_format = computed(() => {
  return proxy.$utils.dateTimeFormateFn(time.value, "year");
});

onMounted(() => {
  getElementHeight();
  getInfo();
  getAll();
});

function setDate(type) {
  let aa;
  if (type == 1) {
    aa = getLastYearDate(time.value);
  } else {
    aa = getNextYearDate(time.value);
  }
  time.value = proxy.$utils.dateTimeFormateFn(aa);
  getAll();
}

function getLastYearDate(inputDate) {
  const date = new Date(inputDate);
  return new Date(date.getFullYear() - 1, 0, 1); // 年份减1，月份设为0（即1月），日期设为1
}

function getNextYearDate(inputDate) {
  const date = new Date(inputDate);
  return new Date(date.getFullYear() + 1, 0, 1); // 年份减1，月份设为0（即1月），日期设为1
}

const getElementHeight = () => {
  let conHeight = window.innerHeight;
  let statisticRefHeight = proxy.$refs.statisticRef.clientHeight;
  console.log("conHeightconHeight", conHeight);
  console.log("statisticRefHeight", statisticRefHeight);
  gridHeight.value = (conHeight - statisticRefHeight - 100) / 2;
  //gridHeight.value = 400;
  console.log("conHeight", gridHeight.value);
};

async function getAll() {
  try {
    loading.value = true;
    info.value = await proxy.$apis.reportSummaryData({ date: time.value });
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

async function getInfo() {
  let ret = await proxy.$apis.classData({
    type: "query",
  });
  let resp = await proxy.$apis.teachingScheduleData({
    type: "all",
    data: {
      curriculumId: "",
      classId: "",
      classTeacherId: "",
      teachingTeacher: "",
    },
  });
  for (let index = 0; index < resp.length; index++) {
    const element = resp[index];
    let current = proxy.$utils.findIndexByField(ret, "_id", element.classId);
    element.className = ret[current].className;
    element.classColor = ret[current].color;
  }
  dates.value = resp;
}
</script>

<style lang="scss">
.statistic {
  .el-statistic__head {
    font-size: 14px;
  }
  .el-statistic__content {
    text-align: center;
  }
}
</style>
<style lang="scss" scoped>
.content {
  //height: calc(100vh - 84px);
  margin: 20px;
}
.el-card {
  margin-bottom: 20px;
}
.grids {
  gap: 20px 20px;
}
.icon {
  width: 30px;
  cursor: pointer;
  img {
    display: block;
    width: 100%;
  }
}
</style>
